<template>
  <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-row>
              <el-col :span="12">
                  <el-form-item label="小区" prop="area">
                      <el-input v-model="form.area"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="姓名" prop="name">
                      <el-input v-model="form.name"></el-input>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                  <el-form-item label="手机号" prop="phone">
                      <el-input v-model="form.phone"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="身份证" prop="idcard">
                      <el-input v-model="form.idcard"></el-input>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                  <el-form-item label="家庭住址" prop="address">
                      <el-input v-model="form.address"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="车牌号" prop="carNumber">
                      <el-input v-model="form.carNumber"></el-input>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                  <el-form-item label="是否健康">
                      <el-radio-group v-model="form.isHealthy">
                          <el-radio :label="0">否</el-radio>
                          <el-radio :label="1">是</el-radio>
                      </el-radio-group>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="有无重点疫区居住、接触史" label-width="250px">
                      <el-radio-group v-model="form.history">
                          <el-radio :label="0">无</el-radio>
                          <el-radio :label="1">有</el-radio>
                      </el-radio-group>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                  <el-form-item label="体温">
                      <el-input-number v-model="form.temper" :min="30" :max="42" ></el-input-number>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="年龄">
                      <el-input-number v-model="form.age" :min="1" :max="99" ></el-input-number>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                  <el-form-item label="是否重症">
                      <el-radio-group v-model="form.isSevere">
                          <el-radio :label="0">否</el-radio>
                          <el-radio :label="1">是</el-radio>
                      </el-radio-group>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="性别" >
                      <el-radio-group v-model="form.gender">
                          <el-radio :label="0">男</el-radio>
                        <el-radio :label="1">女</el-radio>
                      </el-radio-group>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="12">
                  <el-form-item label="住院时间" prop="date">
                      <el-input placeholder="请输入住院时间" suffix-icon="el-icon-date" v-model="form.date"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="症状" prop="symp">
                      <el-input v-model="form.symp"></el-input>
                  </el-form-item>
              </el-col>
          </el-row>  
          <el-form-item label="备注">
              <el-input type="textarea" v-model="form.desc" rows="4"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          area: '',
          name: '',
          phone: '',
          idcard: '',
          address: '',
          carNumber: '',
          isHealthy: 1,
          temper:undefined,
          history:'',
          desc: '',
          age:undefined,
          isSevere:0,
          gender:'',
          date:'',
          symp:'',
        },
        //校验 
        rules:{
            name: [
                { required: true,message:'请输入姓名',trigger:'blur'},
                { min: 2, max:15,message: '长度在1到15个字符',trigger:'blur'}
            ],
            phone: [
                { required: true, message: '请输入手机号码', trigger: 'blur' },
                { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
                {
                  pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                  message: '请输入正确的手机号码',
                  trigger:'change'
                }
            ],
            idcard: [
                { required: true,message:'请输入身份证号码',trigger:'blur'},
                { min: 15, max:15,message: '请输入正确的身份证号码',trigger:'blur'}
            ],
            address: [
                { required: true,message:'请输入地址',trigger:'blur'},
                { min: 5, max:15,message: '长度在5到15个字符',trigger:'blur'}
            ],
            carNumber: [
                { required: true,message:'请输入车牌号',trigger:'blur'},
                { min: 6, max:6,message: '请输入正确的车牌号',trigger:'blur'}
            ],
            date: [
                { required: true,message:'请输入住院时间',trigger:'blur'},
                { min:2, max:4,message:'请输入正确时间',trigger:'blur'}
            ],
            symp: [
                { required:true,message:'请输入症状',trigger:'blur'},
                { min:5,max:100,message:'请输入大于五个字符',trigger:'blur'}
            ]
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
        this.$refs["form"].validate(
            (valid) => {  //箭头函数 lambda表达式 相当于匿名函数的简化写法
                if (valid) {  //形参值为true 说明验证通过，符合所有的校验规则
                     this.$message({
                        message: '提交成功',
                        type: 'success'
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            }
        );
      }
    }
  }
</script>
